<template>
  <div
    class="footer"
    :style="{
      height: proxy.isMobile ? '30rem' : '38.5625rem',
    }"
  >
    <div
      :class="{
        container: !proxy.isMobile,
        f: proxy.isMobile,
        'f-col': proxy.isMobile,
        'f-ac': proxy.isMobile,
        'f-jc': proxy.isMobile,
      }"
      :style="{
        height: proxy.isMobile ? '80%' : 'inherit',
      }"
    >
      <div
        :class="{
          g: !proxy.isMobile,
          g4: !proxy.isMobile,
          gap20: !proxy.isMobile,
        }"
      >
        <div
          class="gap-item"
          :class="{
            f: proxy.isMobile,
            'f-col': proxy.isMobile,
            'f-ac': proxy.isMobile,
            't-c': proxy.isMobile,
          }"
        >
          <img v-slide-up :src="companyInfo.logo" />
          <div v-slide-up class="info mt20">服务热线：{{ companyInfo.tel }}</div>
          <div v-slide-up class="info mt20">地址：{{ companyInfo.address }}</div>
          <div v-slide-plus class="message_btn" @click="handlePath('/contact')">
            留言咨询
          </div>
        </div>
        <div
          v-if="!proxy.isMobile"
          v-for="(item, index) in dataList"
          :key="index"
          class="gap-item"
        >
          <Title
            v-slide-up
            :title="item.title"
            size="20"
            bold="700"
            left="20"
            block="#4680e0"
            block-width="2"
            :line-height="26"
          />
          <div
            v-slide-up
            v-for="(p, k) in item.list"
            :key="k"
            class="link mt26"
            @click="handlePath(p.path)"
          >
            {{ p.name }}
          </div>
        </div>
      </div>
      <div v-slide-up class="copyright">
        {{ companyInfo.copyright }}
        <span @click="toMiit">{{ companyInfo.record }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const store = useStore();

import logo from "@/assets/about_logo.png";
const { proxy } = getCurrentInstance() as any;
const router = useRouter();

const companyInfo = ref({
  logo: logo,
  tel: "189-8074-2420",
  address: "四川省成都市青羊区青羊工业总部基地H区8幢",
  copyright: "Copyright © 2025 四川天启明通信息技术有限公司 版权所有",
  record: "蜀ICP备18032388号-1",
});
const dataList = ref<any>([
  {
    title: "了解天启明通",
    list: [
      { name: "公司简介", path: "/about" },
      { name: "人才招聘", path: "hire" },
      { name: "联系我们", path: "/contact" },
    ],
  },
  { title: "产品与服务", list: [] },
  { title: "行业解决方案", list: [] },
]);

onMounted(() => {
  getProductList();
  getSchemeList();
});

watchEffect(() => {
  if (store.state.serviceData.length > 0) {
    setTimeout(() => {
      getProductList();
    }, 0);
  }
  if (store.state.solutionData.length > 0) {
    setTimeout(() => {
      getSchemeList();
    }, 0);
  }
});

// 获取产品服务列表
const getProductList = () => {
  let list = store.state.serviceData;
  dataList.value[1].list = list.slice(0, 6).map((item: any) => {
    return {
      name: item.name,
      path: `/product?id=${item.query.id}`,
    };
  });
};

// 获取行业解决方案列表
const getSchemeList = () => {
  let list = store.state.solutionData;
  dataList.value[2].list = list.slice(0, 6).map((item: any) => {
    return {
      name: item.name,
      path: `/scheme?id=${item.query.id}`,
    };
  });
};

// 跳转页面
const handlePath = (path: string) => {
  if (path === "hire") {
    store.commit("SET_HIRE", true);
  } else {
    router.push((proxy.isMobile ? "/m" : "/pc") + path);
  }
};

// 跳转备案
const toMiit = () => {
  window.open("https://beian.miit.gov.cn/");
};
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;
  background: url("../../assets/footer_about.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  .container {
    height: 100%;
    padding-top: 100px;
    box-sizing: border-box;
    position: relative;
  }
  .gap-item {
    height: 100%;
    .info {
      color: #fff;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.0187rem;
      line-height: 1.5625rem;
    }
    .message_btn {
      width: 10.25rem;
      height: 3.375rem;
      margin-top: 2.1875rem;
      background: url("@/assets/button.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.875rem;
      font-weight: 700;
      color: #fff;
      transition: all 0.3s;
      &:hover {
        cursor: pointer;
        filter: brightness(0.6);
      }
    }
    .link {
      color: #fff;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.0187rem;
      line-height: 1.6rem;
      transition: all 0.3s ease-in-out;
      &:hover {
        cursor: pointer;
        color: #2aefef;
        transform: translateX(0.625rem);
        text-decoration: underline;
      }
    }
  }
  .copyright {
    position: absolute;
    bottom: 3.125rem;
    left: 1.25rem;
    right: 1.25rem;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    span {
      &:hover {
        cursor: pointer;
        color: #b1b1b1;
      }
    }
  }
}
</style>
